﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        .btn-show-down
        {
            background-image: url(style/images/minimain.png);
        }
        .child
        {
            cursor: pointer;
            opacity: 0.0001;
        }
        
        .child-show
        {
            opacity: 0.6;
        }
        
        
        .child-mouseover
        {
            z-index: 100;
            opacity: 1;
            -moz-transform: scale(1.13);
            -webkit-transform: scale(1.13);
            transform: scale(1.13);
            -moz-box-shadow: 8px 8px 5px rgba(0,0,0,.2);
            -webkit-box-shadow: 8px 8px 5px rgba(0,0,0,.2);
            box-shadow: 2px 2px 2px rgba(0,0,0,.2);
        }
        img
        {
            opacity: .8;
        }        
        img:hover
        {
            opacity: 1;
        }
    </style>
    <script src="js/lib/sea.js" data-main="./js/init-minimain"></script>
    <script src="js/lib/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script src="js/lib/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
    <script>

        var data = [
            { url: 'http://www.baidu.com', title: 'superwolf', image: 'style/images/81-dashboard.png' },
            { url: 'http://www.baidu.com', title: 'superwolf', image: 'style/images/81-dashboard.png' },
            { url: 'http://www.baidu.com', title: 'superwolf', image: 'style/images/81-dashboard.png' },
            { url: 'http://www.baidu.com', title: 'superwolf', image: 'style/images/81-dashboard.png' },
            { url: 'http://www.baidu.com', title: 'superwolf', image: 'style/images/81-dashboard.png' },
            ];


        var mainRadius = 64;
        var subRadius = 16;
        var maxRadius = mainRadius + subRadius;
        var startAngel = Math.PI * 2 * 5 / 8;
        var addtionalAngel = Math.asin(subRadius / maxRadius) * 2;

        var maxCount = Math.PI * 2 / addtionalAngel;
        var functionContainerTemplate = "<div class='child' title='Superwolf' style='width:28px;height:28px;background-image:url(style/images/81-dashboard.png);'></div>";

        function createElement(functionData) {
            var $functionContainer = $(functionContainerTemplate);
            $('body').append($functionContainer);
        }

        function createCircleEffect() {

            for (var i = 0; i < data.length; i++) {
                createElement(data[i]);
            }

            $('.child').hover(function () {
                $(this).addClass('child-mouseover');
            }, function () {
                $(this).removeClass('child-mouseover');
            });

            function refreshChildren() {
                $('.child').each(function (i, item) {
                    var angle = startAngel + addtionalAngel * i;
                    var x = Math.sin(angle) * maxRadius;
                    var y = Math.cos(angle) * maxRadius;
                    $(item).position({ of: $('#mainContainer'), my: 'center center', at: 'center center', offset: x + ' ' + y });
                });
            }
            refreshChildren();

            $('#mainContainer').draggable({
                drag: function () { refreshChildren(); }
            });

            $('#mainContainer')
            .hover(function () {
                $('.child').each(function (i, item) {
                    setTimeout(function () {
                        $(item).animate({ opacity: 0.7 });
                    }, 150 * i);

                });
            }, function () {
                setTimeout(function () {
                    $('.child').animate({ opacity: 0 });
                }, 1800);
            });
        }


        //$(createCircleEffect);
    </script>
</head>
<body>
    <div id="mainContainer" style="float: right; cursor: pointer;
        width: 188px; height: 188px; position: relative; margin-right: 50px; margin-top: 50px;">
        <img src='style/images/minimain.png' style="width: 64px; height: 64px; margin: 30px;" />
    </div>
</body>
</html>
